<!DOCTYPE html>
{% load custom_filters %}
<html>
<head>
    <title>数据预览与分析</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .chart-container {
                height: 400px;
            }
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen flex flex-col">
    <nav class="bg-white shadow-md">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center">
                <i class="fa fa-bar-chart text-indigo-600 text-2xl mr-2"></i>
                <span class="font-bold text-xl text-gray-800">数据分析师</span>
            </div>
            <a href="{% url 'upload_file' %}" class="text-indigo-600 hover:text-indigo-800 transition duration-200 flex items-center">
                <i class="fa fa-upload mr-1"></i> 上传新文件
            </a>
        </div>
    </nav>
    
    <div class="container mx-auto px-4 py-8 flex-grow">
        <div class="bg-white rounded-lg shadow-lg p-6 max-w-6xl mx-auto">
            <h2 class="text-xl font-bold mb-4 text-gray-800">数据预览</h2>
            
            <div class="mb-6">
                <div class="bg-gray-50 p-4 rounded-lg border border-gray-200 mb-4">
                    <div class="flex flex-wrap gap-4">
                        <div class="flex items-center">
                            <span class="text-gray-600 mr-2">行数:</span>
                            <span class="font-semibold">{{ data_info.shape.0 }}</span>
                        </div>
                        <div class="flex items-center">
                            <span class="text-gray-600 mr-2">列数:</span>
                            <span class="font-semibold">{{ data_info.shape.1 }}</span>
                        </div>
                    </div>
                </div>
                
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                {% for col in data_info.columns %}
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    {{ col }}
                                </th>
                                {% endfor %}
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            {% for row in data_info.head %}
                            <tr>
                                {% for col in data_info.columns %}
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {{ row|get_item:col }}
                                </td>
                                {% endfor %}
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            
            <h2 class="text-xl font-bold mb-4 text-gray-800">数据可视化</h2>
            
            <div class="mb-6">
                <form id="chartForm" class="bg-gray-50 p-4 rounded-lg border border-gray-200 mb-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label for="x_column" class="block text-sm font-medium text-gray-700 mb-1">X轴数据列</label>
                            <select id="x_column" name="x_column" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                                {% for col in data_info.columns %}
                                <option value="{{ col }}">{{ col }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div>
                            <label for="y_column" class="block text-sm font-medium text-gray-700 mb-1">Y轴数据列</label>
                            <select id="y_column" name="y_column" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                                {% for col in data_info.columns %}
                                <option value="{{ col }}">{{ col }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="mt-4">
                        <button type="button" id="generateChartBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-md transition duration-200 ease-in-out flex items-center">
                            <i class="fa fa-line-chart mr-2"></i>生成曲线图
                        </button>
                    </div>
                </form>
                
                <div id="chartContainer" class="chart-container bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden"></div>
            </div>
        </div>
    </div>
    
    <footer class="mt-auto py-4 bg-gray-800 text-white text-center">
        <div class="container mx-auto px-4">
            <p>© 2023 数据分析工具 | 使用 Django 和 ECharts 构建</p>
        </div>
    </footer>

    <script>
        // 注册自定义过滤器
        document.addEventListener('DOMContentLoaded', function() {
            // 创建图表实例
            const chartDom = document.getElementById('chartContainer');
            const myChart = echarts.init(chartDom);
            
            // 生成图表按钮点击事件
            document.getElementById('generateChartBtn').addEventListener('click', function() {
                const xColumn = document.getElementById('x_column').value;
                const yColumn = document.getElementById('y_column').value;
                
                // 显示加载状态
                myChart.showLoading();
                
                // 发送AJAX请求
                fetch('{% url "generate_chart" %}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'X-CSRFToken': '{{ csrf_token }}'
                    },
                    body: `x_column=${encodeURIComponent(xColumn)}&y_column=${encodeURIComponent(yColumn)}`
                })
                .then(response => response.json())
                .then(data => {
                    // 隐藏加载状态
                    myChart.hideLoading();
                    
                    // 设置图表配置项
                    const option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                crossStyle: {
                                    color: '#999'
                                }
                            }
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {},
                                dataView: {show: true, readOnly: false},
                                magicType: {show: true, type: ['line', 'bar']},
                                restore: {}
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: data.xAxis,
                        yAxis: data.yAxis,
                        series: data.series
                    };
                    
                    // 使用配置项显示图表
                    myChart.setOption(option);
                })
                .catch(error => {
                    // 隐藏加载状态
                    myChart.hideLoading();
                    alert('生成图表失败: ' + error.message);
                });
            });
            
            // 调整图表大小
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        });
        
        // 自定义过滤器函数
        function get_item(obj, key) {
            return obj[key];
        }
    </script>
</body>
</html>    